import React from 'react'
import RegisterModal from './register-modal'
import InformationCompleteModal from './information-complete-modal'
import SignUpSuccessModal from './sign-up-success-modal'
import { Modal } from 'antd'
import { joinActivity, register, usernameLogin } from '../../../actions/user'
import { connect } from 'react-redux'

class RegisterStepModal extends React.Component {
  state = {
    current: 0,
    isRegister: false
  }

  changeIsRegisterStatus = (isRegister) => {
    const { current } = this.state
    this.setState({ isRegister }, () => {
      this.setState({ current: current + 1 })
    })
  }

  handleCloseModal = () => {
    this.props.closeModal(() => {
      this.setState({ current: 0, isRegister: false })
    })

  }

  render () {
    const { isRegisterModalOpen } = this.props
    const { current } = this.state
    const steps = [{
      title: '注册',
      content: <RegisterModal
        changeIsRegisterStatus={this.changeIsRegisterStatus}
        nextStep={() => this.setState({ current: this.state.current + 1 })}
        register={this.props.register}/>,
    }, {
      title: '信息完善报名',
      content: <InformationCompleteModal
        isRegister={this.state.isRegister}
        nextStep={() => this.setState({ current: this.state.current + 1 })}
        joinActivity={this.props.joinActivity}
        usernameLogin={this.props.usernameLogin}
      />,
    }, {
      title: '报名成功',
      content: <SignUpSuccessModal/>,
    }]
    return <Modal
      title={steps[current].title}
      visible={isRegisterModalOpen}
      onOk={null}
      maskClosable={false}
      footer={null}
      onCancel={this.handleCloseModal.bind(this)}
    >
      <div className="steps-content">{steps[current].content}</div>
    </Modal>
  }
}

const mapStateToProps = state => ({})

const mapDispatchToProps = dispatch => ({
  register: (user, callback) => dispatch(register(user, callback)),
  joinActivity: (userDetail, callback) => dispatch(joinActivity(userDetail, callback)),
  usernameLogin: (user, callback) => dispatch(usernameLogin(user, callback))
})

export default connect(mapStateToProps, mapDispatchToProps)(RegisterStepModal)
